body,
.container {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 10px;
}

.header {
    width: 79.5%;
    height: 50px;
    background-color: aliceblue;
    float: right;
}

.font {
    margin: 20px;
    font-size: 20px;
    color: aliceblue;
}

.quit {
    float: right;
    width: 60px;
    height: 35px;
    margin: 10px;
    background-color: #545c64;
    color: aliceblue;
}

.app {
    width: 20.5%;
    height: 100%;
    position: absolute;
    background-color: #545c64;

}

.iconp {
    margin-left: 5px;
}

.icon {
    width: 17px;
    height: 17px;
    margin-right: 5px;
    margin-bottom: 4px;
}

.main {
    width: 77%;
    height: 100%;
    float: right;
    margin: 15px 15px auto 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}


#prolist,
#order-msg,
#userlist,
#emplist,
#Affirm-Receiving,
#data-statistics,
#order_count,
#order_total,
#order_turnover,
th,
td {
    border: 1px solid #ccc;
    border-collapse: collapse;
    text-align: center;
}

#prolist,
#order-msg,
#userlist,
#emplist,
#Affirm-Receiving,
#data-statistics {
    width: 100%;
}

.product-list {
    width: 100%;
}


.product-insert,
.order-msg,
.person-div,
.staff-div,
.user-list,
.emp-list,
.Affirm-Receiving,
.data-statistics {
    width: 100%;
    display: none;
}


#proName,
#proSortName,
#proColor,
#proType,
#proPrice,
#proImg,
#proAmount,
#proPrice
{
    width: 40%;
    padding-left: 5px;
    font-size: 5px;
    height: 30px;
    
}
#HomeName,
#HomePicture{
    width: 38%;
    padding-left: 5px;
    font-size: 5px;
    height: 30px;
} 

.list {
    float: left;
    margin: 18px auto 18px 15px;
    width: 30%;
}

.insert,
.orderlist,
.userlist,
.emplist,
.datalist{
    display: none;
    float: left;
    margin: 18px auto 18px 15px;
    width: 30%;
}
.prolist{
    border-collapse: collapse;
}
#update{
    text-decoration: none;
    color: #545c64;
}
#delete{
    text-decoration: none;
    color: red;
}
